﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/img/favicon.ico" rel="shortcut icon" />
    <link href="https://fonts.googleapis.com/css?family=Lato:700,900%7CDidact+Gothic" rel="stylesheet">
    <title>Opium</title>
</head>
<body>
    <!-- LOADER -->
    <div id="loader-wrapper">
        <div class="cssload-container">
            <div class="cssload-whirlpool"></div>
        </div>
    </div>
    <!-- LOADER -->

    <!-- HEADER -->
    <header class="header-style header-style2 header-style3 header-style4">
        <div class="hamburger-icon3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="header-content">
            <div class="row">
                <div class="col-xs-6 col-sm-2">
                    <a class="logo" href="index.html">
                        <img src="../static/img/logo.png" alt="#" />
                    </a>
                </div>
                <div class="col-xs-6 col-sm-10">
                    <div class="hamburger-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="hamburger-icon2">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <nav class="normal-s">
                        <ul>
                            <li class="dropdown-plus">
                                <a href="index.html">HOME</a>
                                <span></span>
                                <ul>
                                    <li><a href="index.html">Home #1</a></li>
                                    <li><a href="index2.html">Home #2</a></li>
                                    <li><a href="index3.html">Home #3</a></li>
                                    <li><a href="index4.html">Home #4</a></li>
                                    <li><a href="index5.html">Home #5</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="about.html">ABOUT</a>
                            </li>
                            <li class="active">
                                <a href="detail.html">PORTFOLIO</a>
                            </li>
                            <li class="dropdown-plus">
                                <a href="blog.html">BLOG</a>
                                <span></span>
                                <ul>
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blogdetail.html">Blog detail</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="contact.html">CONTACT</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="section">
                    <p>A small design & technology freelancer based out of Atlanta, GA. Catch up on my latest projects and get in touch.</p>
                </div>
                <div class="category">
                    <span class="small-1">CATEGORY</span>
                    <ul>
                        <li class="active">All</li>
                        <li>Development</li>
                        <li>Illustration</li>
                        <li>Product</li>
                        <li>Typography</li>
                    </ul>
                </div>
                <div class="sort-by">
                    <span class="small-1">SORT BY</span>
                    <ul>
                        <li>Random</li>
                        <li class="active">Popular</li>
                        <li>Rate</li>
                    </ul>
                </div>
                <div class="normal-3 section">
                    <ul>
                        <li>
                            <a href="tel:+138(095)6526538">+138 (095) 6526 538</a>
                        </li>
                        <li>
                            <a href="mailto:info@opium.com">info@opium.com</a>
                        </li>
                    </ul>
                    <div class="empty-space h10-xs fl"></div>
                    <div class="follow">
                        <a class="social" href="https://www.facebook.com/" target="_blank">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.instagram.com/" target="_blank">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.pinterest.com/" target="_blank">
                            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.twitter.com/" target="_blank">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mob-icon"></div> 
        </div>                                                          
    </header>
    <!-- HEADER -->
    
    <!-- OVERLAY-MENU -->
    <div class="overlay-wrapper height-min">
        <div class="overlay-animation"></div>
        <div class="flex">
            <div class="flex-in">
                <div class="overlay-menu">
                    <div class="container">
                        <div class="row">
                            <div class="btn-close"><span></span><span></span></div>
                            <div class="col-lg-2 col-lg-offset-5">
                                <ul>
                                    <li class="dropdown-plus">
                                        <a href="index.html">HOME</a>
                                        <span></span>
                                        <ul>
                                            <li><a href="index.html">Home #1</a></li>
                                            <li><a href="index2.html">Home #2</a></li>
                                            <li><a href="index3.html">Home #3</a></li>
                                            <li><a href="index4.html">Home #4</a></li>
                                            <li><a href="index5.html">Home #5</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="about.html">ABOUT</a>
                                    </li>
                                    <li>
                                        <a href="detail.html">PORTFOLIO</a>
                                    </li>
                                    <li class="dropdown-plus">
                                        <a href="blog.html">BLOG</a>
                                        <span></span>
                                        <ul>
                                            <li><a href="blog.html">Blog</a></li>
                                            <li><a href="blogdetail.html">Blog detail</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="contact.html">CONTACT</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end OVERLAY-MENU -->

    <!-- OVERLAY-VIDEO -->
     <div class="overlay-wrapper height-min video">
        <div class="overlay-animation"></div>
        <div class="iframe-wrapper">
            <iframe class="full-size" src="../static/img/transparent.png" allowfullscreen></iframe>
        </div>
        <div class="btn-close"><span></span><span></span></div>
    </div>
    <!-- end OVERLAY-VIDEO -->


    <!-- content -->
    <div id="content-wrapper">
        
        <div class="empty-space h45-xs h65-sm"></div>
        <div class="container-fluid-style3">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="h3">ADF - 5369</h1>
                </div>
            </div>
            <div class="empty-space h30-xs"></div>
            <div class="row">
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-3">
                            <p class="normal-1"><span>CATEGORY</span></p>
                        </div>
                        <div class="col-md-9">
                            <p class="font-fml-1"><span class="line"></span>people photosession</p>
                        </div>
                    </div>
                    <div class="empty-space h15-xs"></div>
                    <div class="row">
                        <div class="col-md-3">
                            <p class="normal-1"><span>CLIENT</span></p>
                        </div>
                        <div class="col-md-9">
                            <p class="font-fml-1"><span class="line"></span>family McDuglas</p>
                        </div>
                    </div>
                    <div class="empty-space h15-xs"></div>
                    <div class="row">
                        <div class="col-md-3">
                            <p class="normal-1"><span>WEBSITE</span></p>
                        </div>
                        <div class="col-md-9">
                            <p class="font-fml-1"><span class="line"></span><a href="#">http: mcduglas.com/galler</a></p>
                        </div>
                    </div>
                    <div class="empty-space h15-xs"></div>
                    <div class="row">
                        <div class="col-md-3">
                            <p class="normal-1"><span>DATE</span></p>
                        </div>
                        <div class="col-md-9">
                            <p class="font-fml-1"><span class="line"></span>14/07/2015</p>
                        </div>
                    </div>
                </div>
                <div class="empty-space h30-xs h0-md"></div>
                <div class="col-md-7">
                    <div class="section">
                        <p class="normal-1">Nullam dictum quis quam at dignissim. Cras consectetur diam id condimentum porttitor. Curabitur molli lacus id ultricies luctus. Sed vitae finibus sem. Suspendisse rhoncus placerat felis sed luctus. Maecenas nec ex vitae elit facilisis luctus. Nulla elementum sapien eu semper accumsan. Suspendisse tincidunt quam sed massa congue, ac mollis arcu houra elementum sapien eu semper accumsan liquet.</p>
                    </div>
                </div>
                <div class="empty-space h45-xs h0-md"></div>
            </div>
            <div class="empty-space h85-md h45-xs fl"></div>
            <img class="block" src="../static/img/detail-img-1.jpg" alt="">
            <div class="empty-space h50-xs fl"></div>
            <img class="block" src="../static/img/detail-img-2.jpg" alt="">
            <div class="empty-space h40-xs fl"></div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="section">
                        <p class="normal-1 text-center">Curabitur mollis lacus id ultricies luctus. Sed vitae finibus sem. Suspendisse rhoncus placerat felis sed luctus. Maecenas nec ex vitae elit facilisis luctus. Nulla elementum sapien eu semper accumsan. Suspendisse tincidunt quam sed massa congue, ac mollis arcu aliquet.</p>
                    </div>
                </div>
            </div>
            <div class="empty-space h45-xs fl"></div>
            <div class="row">
                <div class="col-md-6">
                    <img class="block padd-right-10" src="../static/img/detail-img-3.jpg" alt="">
                </div>
                <div class="col-md-6">
                    <div class="empty-space h50-xs h0-md fl"></div>
                    <img class="block padd-left-10" src="../static/img/detail-img-4.jpg" alt="">
                </div>
            </div>
            <div class="empty-space h50-xs fl"></div>
            <div class="video-wrapper">
                <img class="block" src="../static/img/detail-img-7.jpg" alt="">
                <div class="button-play open-video" data-src="https://www.youtube.com/embed/kQT2y3UiosQ?autoplay=1&amp;loop=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;color=white&amp;theme=light&amp;wmode=transparent"></div>
            </div>
            <div class="empty-space h45-xs h90-md fl"></div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="quote">
                        <img src="../static/img/quote-left.png" alt="">
                        <div class="empty-space h5-xs"></div>
                        <p class="biggest-1">I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best</p>
                        <div class="empty-space h15-xs"></div>
                        <img src="../static/img/quote-right.png" alt="">
                        <div class="empty-space h10-xs"></div>
                        <p class="big-2">MELANI MONREO</p>
                        <div class="empty-space h5-xs"></div>
                        <p class="grey">designer, REDstone Company</p>
                    </div>
                </div>
            </div>
            <div class="empty-space h40-xs h80-md fl"></div>
            <div class="row">
                <div class="col-md-6">
                    <div class="tags">
                        <span>TAGS</span>
                        <a class="btn-style3" href="#">CINEMA</a>
                        <a class="btn-style3" href="#">MUSIC</a>
                        <a class="btn-style3" href="#">CULTURE</a>
                        <a class="btn-style3" href="#">ART</a>
                    </div>
                </div>
                <div class="empty-space h20-xs h0-md"></div>
                <div class="col-md-6">
                    <div class="follow">
                        <span class="pull-left">SHARE</span>
                        <a class="social" href="https://www.facebook.com/" target="_blank">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.instagram.com/" target="_blank">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.pinterest.com/" target="_blank">
                            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.twitter.com/" target="_blank">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="empty-space h75-xs h130-md"></div>

            <div class="row">
                <div class="col-md-6">
                    <div class="img-block-wrapper text-bottom style2 padd-right-10">
                        <div class="img-block">
                            <a href="#">
                                <img src="../static/img/detail-img-5.jpg" alt="">
                            </a>
                            <div class="description-wrapper">
                                <div class="description">
                                   <a class="biggest-1 mouseover-1">Auctor ex diam</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="empty-space h20-xs h0-md"></div>
                <div class="col-md-6">
                    <div class="img-block-wrapper text-bottom style2 padd-left-10">
                        <div class="img-block">
                            <a href="#">
                                <img src="../static/img/detail-img-6.jpg" alt="">
                            </a>
                            <div class="description-wrapper">
                                <div class="description">
                                   <a class="biggest-1 mouseover-1">Auctor ex diam</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="empty-space h10-xs fl"></div>
                    <div class="page-button">
                        <a class="button-prev">PREVIOUS</a>
                        <a class="button-next">NEXT</a>
                    </div>
                </div>
            </div>
            
            <div class="empty-space h45-md h0-xs fl"></div>
        </div>

        <div class="empty-space h20-xs h40-md fl"></div>
        <!-- footer -->
        <footer class="footer-style">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="copyright normal-s">
                            Copyright &copy; 2017.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer -->
                
    </div>
    <!-- content -->


    <script src="../static/js/jquery-2.2.4.min.js"></script>
    <script src="../static/js/global.js"></script>

</body>
</html>
